<template>
  <!-- <dv-full-screen-container> -->
  <div class="all">
    <div class="head" v-show="true">
      <div class="head-one">
        <div
          style="
            margin-left: 22px;
            font-size: 20px;
            margin-top: 13px;
            background: linear-gradient(to bottom, white, #052e80);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 24px;
          "
        >
          盂县国有资本运营有限公司
        </div>
        <div
          style="
            margin-left: 22px;
            background: linear-gradient(to bottom, white, #052e80);
            -webkit-background-clip: text;
            color: transparent;
          "
        >
          数据可视化平台
        </div>
      </div>
      <div class="head-two">
        <div class="head-item" @click="changeOne">
          <div class="font-100">产业分布</div>
          <div class="line" v-show="items[0]" />
        </div>
        <div class="head-item" @click="changeTwo">
          <div class="font-100">资源分布</div>
          <div class="line" v-show="items[1]" />
        </div>
        <div class="head-item" @click="changeThree">
          <div class="font-100">重点项目</div>
          <div class="line" v-show="items[2]" />
        </div>
      </div>
    </div>
    <div class="content" v-show="true">
      <div class="content-left">
        <dv-border-box-2
          :color="['transparent', 'transparent']"
          style="
            width: 95%;
            height: 45vh;
            margin-top: 5px;
            margin-left: 20px;
            background: rgba(180, 180, 180, 0.1);
          "
        >
          <div>
            <img
              src="../assets/title_bg1.png"
              style="margin-top: 15px; margin-left: 15px"
            />
            <div style="color: white; margin-left: 70px; margin-top: -40px">
              重点项目分布
            </div>
          </div>
          <div
            id="project"
            style="width: 96%; height: 86%; margin-top: 20px; margin-left: 2%"
          ></div>
          <img
            style="position: absolute; bottom: 0; left: 0; width: 100%"
            src="../assets/bottom_bg.png"
          />
        </dv-border-box-2>
        <dv-border-box-2
          :color="['transparent', 'transparent']"
          style="
            width: 95%;
            height: 45vh;
            margin-top: 5px;
            margin-left: 20px;
            background: rgba(180, 180, 180, 0.1);
          "
        >
          <div>
            <img
              src="../assets/title_bg1.png"
              style="margin-top: 15px; margin-left: 15px"
            />
            <div style="color: white; margin-left: 70px; margin-top: -40px">
              项目类型
            </div>
          </div>
          <div
            id="projectType"
            style="width: 96%; height: 100%; margin-top: -15px; margin-left: 2%"
          ></div>
          <img
            style="position: absolute; bottom: 0; left: 0; width: 100%"
            src="../assets/bottom_bg.png"
          />
        </dv-border-box-2>
      </div>
      <div class="content-center">
        <div class="content-center-one">
          <div class="conten-center-one-item">
            <!-- <dv-border-box-8></dv-border-box-8> -->
            <div
              style="
                color: white;
                width: 100%;
                text-align: center;
                font-weight: bold;
                margin-top: 1.5vh;
              "
            >
              项目总数
            </div>
            <dv-digital-flop
              :config="sumConfig"
              style="width: 100%; height: 30px; margin-top: 1vh"
            />
          </div>
          <div class="conten-center-one-item">
            <div
              style="
                color: white;
                width: 100%;
                text-align: center;
                font-weight: bold;
                margin-top: 1.5vh;
              "
            >
              年计划开工数
            </div>
            <dv-digital-flop
              :config="planConfig"
              style="width: 100%; height: 30px; margin-top: 1vh"
            />
          </div>
          <div class="conten-center-one-item">
            <div
              style="
                color: white;
                width: 100%;
                text-align: center;
                font-weight: bold;
                margin-top: 1.5vh;
              "
            >
              已开工
            </div>
            <dv-digital-flop
              :config="doneConfig"
              style="width: 100%; height: 30px; margin-top: 1vh"
            />
          </div>
          <div class="conten-center-one-item">
            <div
              style="
                color: white;
                width: 100%;
                text-align: center;
                font-weight: bold;
                margin-top: 1.5vh;
              "
            >
              总投资
            </div>
            <dv-digital-flop
              :config="sumPriceConfig"
              style="width: 100%; height: 30px; margin-top: 1vh"
            />
          </div>
          <div class="conten-center-one-item">
            <div
              style="
                color: white;
                width: 100%;
                text-align: center;
                font-weight: bold;
                margin-top: 1.5vh;
              "
            >
              年计划投资
            </div>
            <dv-digital-flop
              :config="planPriceConfig"
              style="width: 100%; height: 30px; margin-top: 1vh"
            />
          </div>
          <div class="conten-center-one-item">
            <div
              style="
                color: white;
                width: 100%;
                text-align: center;
                font-weight: bold;
                margin-top: 1.5vh;
              "
            >
              年完成投资
            </div>
            <dv-digital-flop
              :config="donePriceConfig"
              style="width: 100%; height: 30px; margin-top: 1vh"
            />
          </div>
        </div>
        <div class="content-center-two">
          <dv-border-box-2 :color="['transparent', 'transparent']">
            <div class="map">
              <dv-decoration-12
                :dur="10"
                style="
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 100%;
                  height: 100%;
                  transform: translate(-50%, -50%);
                  opacity: 0.3;
                "
              />
              <dv-decoration-3
                style="
                  position: absolute;
                  left: 0;
                  top: 20px;
                  width: 300px;
                  height: 30px;
                "
              />
              <dv-decoration-3
                style="
                  position: absolute;
                  right: 0;
                  top: 20px;
                  width: 250px;
                  height: 30px;
                "
              />
              <dv-decoration-3
                style="
                  position: absolute;
                  right: 0;
                  bottom: 5px;
                  width: 250px;
                  height: 30px;
                "
              />
              <dv-decoration-3
                style="
                  position: absolute;
                  left: 0;
                  bottom: 5px;
                  width: 250px;
                  height: 30px;
                "
              />
              <div class="map" id="mapEchart"></div>
              <div
                v-if="popup.visible"
                class="custom-popup"
                :style="{ left: popupX + 'px', top: popupY + 'px' }"
              >
                <dv-border-box-13 style="padding: 20px">
                  <h3>项目信息:{{ popup.data.name }}</h3>
                  <p>经度: {{ popup.data.lng }}</p>
                  <p>纬度: {{ popup.data.lat }}</p>
                </dv-border-box-13>

                <!-- 可以根据需要展示更多自定义信息 -->
                <!-- <button @click="popup.visible = false">关闭</button> -->
              </div>
            </div>
          </dv-border-box-2>
        </div>
        <div class="content-center-three">
          <dv-border-box-2 :color="['transparent', 'transparent']">
            <div>
              <img
                src="../assets/title_bg1.png"
                style="margin-top: 15px; margin-left: 15px"
              />
              <div style="color: white; margin-left: 70px; margin-top: -40px">
                项目进度
              </div>
            </div>
            <div
              style="
                width: 100%;
                height: 16.5vh;
                display: flex;
                margin-top: 1.4vh;
              "
            >
              <div style="width: 45%; height: 100%">
                <div
                  id="projectProgress"
                  style="
                    width: 100%;
                    height: 105%;
                    margin-top: -5px;
                    margin-left: -50px;
                  "
                ></div>
              </div>
              <!-- <div style="width: 20%; height: 100%">2</div> -->
              <div style="width: 55%; height: 100%; margin-left: -30px">
                <div style="color: white; margin-left: 20px; margin-top: -10px">
                  异常项目列表
                </div>
                <dv-scroll-board
                  :config="listConfig"
                  style="
                    width: 105%;
                    height: 80%;
                    margin-top: 5px;
                    <!-- background: #0a2050; -->
                  "
                />
              </div>
            </div>
          </dv-border-box-2>
        </div>
      </div>
      <div class="content-right">
        <dv-border-box-2
          :color="['transparent', 'transparent']"
          style="
            width: 95%;
            height: 45vh;
            margin-top: 5px;
            margin-left: 5px;
            background: rgba(180, 180, 180, 0.1);
          "
          ><div>
            <img
              src="../assets/title_bg1.png"
              style="margin-top: 15px; margin-left: 15px"
            />
            <div style="color: white; margin-left: 70px; margin-top: -40px">
              视频服务
            </div>
          </div>
          <div style="width: 100%; height: 85%; margin-top: 2vh">
            <div style="width: 100%; height: 20%; display: flex">
              <div style="width: 33%; height: 100%">
                <div style="color: white; text-align: center">已接入摄像头</div>
                <dv-digital-flop
                  :config="cameraCountConfig"
                  style="width: 100%; height: 25px; margin-top: 1vh"
                />
              </div>
              <div
                style="
                  width: 1px;
                  height: 60%;
                  background: rgb(62, 215, 213);
                  margin-top: 0.8vh;
                "
              />
              <div style="width: 34%; height: 100%">
                <div style="color: white; text-align: center">在线数量</div>
                <dv-digital-flop
                  :config="cameraOnConfig"
                  style="width: 100%; height: 25px; margin-top: 1vh"
                />
              </div>
              <div
                style="
                  width: 1px;
                  height: 60%;
                  background: rgb(62, 215, 213);
                  margin-top: 0.8vh;
                "
              />
              <div style="width: 33%; height: 100%">
                <div style="color: white; text-align: center">离线数量</div>
                <dv-digital-flop
                  :config="cameraOutConfig"
                  style="width: 100%; height: 25px; margin-top: 1vh"
                />
              </div>
            </div>
            <div
              style="width: 100%; height: 80%; display: flex; flex-wrap: wrap"
            >
              <div
                style="
                  width: 40%;
                  height: 4.5vh;
                  margin-left: 6%;
                  margin-top: 3px;
                "
                v-for="item in lists"
                :key="item.id"
              >
                <img
                  src="../assets/hot.png"
                  width="88%"
                  style="margin-left: 6%"
                />
                <div
                  style="
                    margin-right: 6%;
                    margin-top: -8px;
                    color: white;
                    font-size: 12px;
                    float: right;
                  "
                >
                  02:16:12
                </div>
              </div>
            </div>
          </div>
          <img
            style="position: absolute; bottom: 0; left: 0; width: 100%"
            src="../assets/bottom_bg.png"
        /></dv-border-box-2>
        <dv-border-box-2
          :color="['transparent', 'transparent']"
          style="
            width: 95%;
            height: 45vh;
            margin-top: 5px;
            margin-left: 5px;
            background: rgba(180, 180, 180, 0.1);
          "
          ><div>
            <img
              src="../assets/title_bg1.png"
              style="margin-top: 15px; margin-left: 15px"
            />
            <div style="color: white; margin-left: 70px; margin-top: -40px">
              项目咨询
            </div>
          </div>
          <div style="width: 100%; height: 85%; margin-top: 2vh">
            <div
              v-for="item in 2"
              :key="item.id"
              style="
                width: 90%;
                height: 17vh;
                margin-top: 2.5vh;
                margin-left: 5%;
              "
            >
              <dv-border-box-10 style="padding: 5px">
                <div
                  style="
                    color: white;
                    margin-top: 5px;
                    margin-left: 5px;
                    font-size: 14px;
                  "
                >
                  项目一咨询
                </div>
                <div style="display: flex; widht: 100%; height: 72%">
                  <div
                    style="
                      width: 70%;
                      height: 88%;
                      color: white;
                      font-size: 12px;
                      margin-left: 5px;
                      margin-top: 1px;
                      padding: 2px;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 5;
                      overflow: hidden;
                    "
                  >
                    项目的技术创新性论述s
                    1详细说明本项目的基本原理及相关技术内容，描述项目的技术或工艺路线、产品结构、基本算法原理等(1000字以内)图示管理
                    2详细说明本项目的基本原理及相关技术内容，描述项目的技术或工艺路线、产品结构、基本算法原理等(1000字以内)图示管理
                    3详细说明本项目的基本原理及相关技术内容，描述项目的技术或工艺路线、产品结构、基本算法原理等(1000字以内)图示管理
                    4详细说明本项目的基本原理及相关技术内容，描述项目的技术或工艺路线、产品结构、基本算法原理等(1000字以内)图示管理
                    5论述项目创新点，包括技术创新、产品结构创新、产品工艺创新、产品性能及使用效果的显著变化等(1000字以内)3详细描述项目的技术来源、合作单.
                  </div>
                  <div style="width: 30%; heigth: 100%">
                    <img
                      src="../assets/hot.png"
                      height="90%"
                      width="96%"
                      style="margin-left: 3px"
                    />
                  </div>
                </div>
              </dv-border-box-10>
            </div>
          </div>
          <img
            style="position: absolute; bottom: 0; left: 0; width: 100%"
            src="../assets/bottom_bg.png"
        /></dv-border-box-2>
      </div>
    </div>
  </div>
  <!-- </dv-full-screen-container> -->
</template>

<script>
import { ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
// import geoJson from "../assets/yangquan.json"; //省份的json格式
import geoJson from "../assets/yuxian.json"; //省份的json格式
// import geoJson from "../assets/100000.json"; //全国的json格式
// import Charts from "@jiaminghi/charts";

export default {
  name: "screenOne",
  setup() {
    const items = ref([false, false, true]);
    const lists = ref([1, 2, 3, 4, 5, 6]);
    // 控制弹窗显示状态和内容
    const popup = ref({
      visible: false,
      x: 0,
      y: 0,
      data: {
        lng: 0,
        lat: 0,
        name: "",
      },
    });
    const popupX = ref(0);
    const popupY = ref(0);
    const sumConfig = ref({
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}",
    });
    const planConfig = ref({
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}",
    });
    const doneConfig = ref({
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}",
    });
    const sumPriceConfig = ref({
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}亿",
    });
    const planPriceConfig = ref({
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}亿",
    });
    const donePriceConfig = ref({
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}亿",
    });
    const cameraCountConfig = ref({
      style: {
        fontSize: 20,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}",
    });
    const cameraOnConfig = ref({
      style: {
        fontSize: 20,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}",
    });
    const cameraOutConfig = ref({
      style: {
        fontSize: 20,
        fill: "#ffffff",
      },
      number: [0],
      content: "{nt}",
    });
    const listConfig = ref({
      header: ["区域名", "项目名称", "节点", "进度状态"],
      rowNum: 4,
      headerBGC: "transparent",
      oddRowBGC: "transparent",
      evenRowBGC: "transparent",
      align: ["center", "center", "center", "center"],
      data: [
        ["秀水镇", "项目六", "40", "10"],
        ["牛村镇", "项目七", "40", "10"],
        ["路家村镇", "项目八", "40", "10"],
        ["南娄镇", "项目九", "40", "10"],
        ["牛村镇", "项目十", "40", "10"],
        ["上社镇", "项目十一", "40", "10"],
      ],
    });
    const changeOthers = () => {
      items.value?.forEach((item, index) => {
        // item.value = false;
        console.log(item);
        items.value[index] = false;
      });
    };
    const changeOne = () => {
      changeOthers();
      items.value[0] = true;
    };
    const changeTwo = () => {
      changeOthers();
      items.value[1] = true;
    };
    const changeThree = () => {
      changeOthers();
      items.value[2] = true;
    };
    // const showTooltip = (coord, name, myChart) => {
    //   const tooltip = document.createElement("div");
    //   tooltip.style.position = "absolute";
    //   tooltip.style.backgroundColor = "rgba(50,50,50,0.7)";
    //   tooltip.style.color = "#fff";
    //   tooltip.style.padding = "5px";
    //   tooltip.style.borderRadius = "5px";
    //   tooltip.style.pointerEvents = "none"; // 防止遮挡鼠标事件
    //   tooltip.style.whiteSpace = "nowrap"; // 防止换行
    //   tooltip.style.zIndex = 100; // 确保在最上层显示
    //   tooltip.innerHTML = name; // 设置显示内容为省份名
    //   myChart.appendChild(tooltip); // 将提示框添加到图表容器中
    //   tooltip.style.left = coord[0] + "px"; // 设置X坐标位置
    //   tooltip.style.top = coord[1] + "px"; // 设置Y坐标位置
    // };
    const chartMap = () => {
      let myChart = echarts.init(document.getElementById("mapEchart"));
      echarts.registerMap("yuxian", geoJson);
      myChart.hideLoading();

      // let iconUrl = require("@/assets/logo.png");
      // let iconUrl1 = require("@/assets/all_bg.png");
      // let imges = "../assets/all_bg.png";
      var data = [
        {
          name: "项目一",
          // value: [116.405285, 39.904989],
          // value: [113.535041, 38.51964],
          value: [113.42, 38.0, 1, "项目一"],
        },
        {
          name: "项目二",
          // value: [116.405285, 39.904989],
          // value: [113.535041, 38.51964],
          value: [113.57, 38.12, 1, "项目二"],
          // symbol: "",
          // symbol:"image://",
          // symbolSize: [10, 50],
          // itemStyle: {
          //   color: "red",
          //   borderColor: "transparent",
          //   borderWidth: 30,
          // },
          // symbol: "image:" + imges,
        },
        {
          name: "项目四",
          // value: [116.405285, 39.904989],
          // value: [113.535041, 38.51964],
          value: [113.36, 38.09, 1, "项目四"],
        },
        {
          name: "项目三",
          // value: [116.405285, 39.904989],
          // value: [113.535041, 38.51964],
          value: [113.35, 38.27, 1, "项目三"],
        },
        {
          name: "项目五",
          value: [113.13, 38.15, 1, "项目五"],
        },
      ];
      // 图表配置项
      let option = {
        //104.34,31.50
        // graphic: [
        //   // {
        //   //   type: "image",
        //   //   style: {
        //   //     image: imageUrl, // 图片的URL
        //   //     width: 20, // 图片的宽度
        //   //     height: 30, // 图片的高度
        //   //     x: 500, // 图片的X坐标
        //   //     y: 200, // 图片的Y坐标
        //   //   },
        //   // },
        //   {
        //     type: "image",
        //     coordinateSystem: "geo3D",
        //     style: {
        //       image: imageUrl, // 图片的URL
        //       width: 20, // 图片的宽度
        //       height: 30, // 图片的高度
        //     },
        //     position: [500, 300, 5], // 在3D空间中的位置，根据需要调整
        //   },
        // ],

        // geo: {
        //   map: "yuxian",
        //   roam: false,
        //   itemStyle: {
        //     color: "#007aff",
        //     // color: "#051640",
        //     borderWidth: 3,
        //     borderColor: "#fff",
        //     areaColor: "#fff",
        //   },
        // },

        geo3D: {
          // geo: {
          map: "yuxian",
          roam: true,
          regionHeight: 5, // 设置地图墙体厚度
          layoutSize: 300, // 地图大小
          regions: [
            {
              name: "yuxian", // 地图名称，与 map 属性对应
              // selectedMode: "single",
              coordinateSystem: "geo3D",
            },
          ],
          itemStyle: {
            // color: "rgba(65, 82, 245, 0.9)",
            color: "#051640",
            // color: "#333333",
            // color:
            //   "linear-gradient(90deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 19.55%, rgba(204, 204, 204, 1) 83.43%, rgba(204, 204, 204, 0) 100%);",
            // color: "#3d59cd",
            // color: "#ff00ff", // 荧光颜色
            // color: "rgb(62,215,213)",
            // borderColor: "#3d59cd",
            borderColor: 'rgba(65, 82, 245, 0.1)',
            // borderColor: "rgb(62,215,213,0.5)",
            // borderColor: 'rgba(54, 245, 203, 0.5)',
            // shadowColor: 'rgba(54, 245, 203, 1)',
            //发光效果
            // shadowBlur: 30,

            // borderColor: "(51, 69, 255, 0.9)",
            // shadowColor: "rgba(51, 69, 255, 0.5)",
            // shadowBlur: 500, // 发光效果的模糊大小
            // shadowColor: "rgba(255, 215, 0, 0.8)",
            borderWidth: 2, // 边框宽度
            // opacity: 0.8, // 透明度，模拟闪烁效果
          },
          viewControl: {
            autoRotate: true,
            autoRotateAfterStill: 1,
            distance: 95,
            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            alpha: 25,
            animation: true, // 是否开启动画。[ default: true ]
            // animationDurationUpdate: 100, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
            zoom: 1.5,
          },

          emphasis: {
            disabled: false, //是否可以被选中
            label: {
              //移入时的高亮文本
              show: false,
              color: "#ffffff", //显示字体颜色变淡
              // color: "transparent", //显示字体颜色变淡
              fontSize: 14, //显示字体变大
            },
            itemStyle: {
              // color: "#ff7aff", //显示移入的区块变粉色
              color: "#051640",
              borderColor: "#333",
              // color: "#f00", // 发光颜色
              // borderColor: "#ff0", // 发光描边颜色
              // borderWidth: 3, // 发光描边宽度
              // shadowBlur: 20, // 发光模糊度
              // shadowColor: "#ff0", // 发光颜色
            },
          },

          label: {
            show: false,
            position: "top",
            color: "#fff", //地图初始化区域字体颜色
            fontSize: 14,
            lineHeight: 16,
            // formatter: "{a|这里是文本}",
            // rich: {
            //   a: {
            //     color: "blue",
            //     fontSize: 14,
            //     lineHeight: 20,
            //   },
            // },
            // textStyle: {
            //   color: "#fff", //地图初始化区域字体颜色
            //   fontSize: 12,
            //   opacity: 1,
            //   backgroundColor: "rgba(0,23,11,0)",
            // },
          },
          shading: "lambert",
          light: {
            //光照阴影
            main: {
              color: "#fff", //光照颜色
              intensity: 1, //光照强度
              shadowQuality: "high", //阴影亮度
              shadow: false, //是否显示阴影
              //shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10,
            },
            ambient: {
              intensity: 1,
            },
          },
        },


        // geo3D: {
        // // geo: {
        //   map: "yuxian", // 使用中国地图
        //   // layoutCenter: [0, 0], // 地图中心
        //   roam: true,
        //   layoutSize: 800, // 地图大小
        //   regionHeight: 5, // 设置地图墙体厚度
        //   regions: [
        //     {
        //       name: "yuxian", // 地图名称，与 map 属性对应
        //       selectedMode: "single",
        //     },
        //   ],
        //   itemStyle: {
        //     color: "#051640", // 地图颜色
        //     borderWidth: 2, // 边界线宽度
        //     borderColor: "#ffffff", // 边界线颜色
        //     areaColor: "#2D5F9F",
        //   },

        //   label: {
        //     show: true, // 显示标签
        //     color: "transparent", // 标签颜色
        //     fontSize: 14,
        //   },
        //   light: {
        //     //光照阴影
        //     main: {
        //       color: "#fff", //光照颜色
        //       intensity: 1, //光照强度
        //       shadowQuality: "high", //阴影亮度
        //       shadow: false, //是否显示阴影
        //       //shadowQuality: "medium", //阴影质量 ultra //阴影亮度
        //       alpha: 35,
        //       beta: 10,
        //     },
        //     ambient: {
        //       intensity: 1,
        //     },
        //   },
        // },

        series: [
          {
            name: "uuu",
            type: "bar3D", // 使用 scatter3D 系列类型来标注图片
            coordinateSystem: "geo3D", // 指定坐标系为 geo3D
            // coordinateSystem: 'globe',
            position: ["50%", "50%"],
            shading: "lambert",
            barWidth: 10,
            data: data,
            // events: {
            //   click: function (params) {
            //     alert("你点击了 " + params.name + " 的数据点");
            //   },
            // },
            symbol: "circle",
            // symbol: "image:" +"https://a.amap.com/jsapi/static/image/plugin/marker_red.png",
            // symbol: "image://" + imges,
            // symbol:
            //   "path://https://s10.aconvert.com/convert/p3r68-cdx67/a476n-zquwv.svg", //自定义图片
            // symbol:"",
            // symbol:"",
            symbolSize: [40, 40],
            itemStyle: {
              color: "rgb(62,215,213)", // 设置点的颜色为蓝色
              // opacity: 0.8,
              // color: "#ff69b4", // 设置点的颜色为蓝色
            },
            // itemStyle: {
            //   color: "transparent",
            // },
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              formatter: function (params) {
                // 自定义标签内容
                // console.log(params.value);
                return params.value[3]; // 使用数组中的第一个元素作为标签文本
              },
              // formatter: "{a|这里是文本}",
              // rich: {
              //   a: {
              //     color: "blue",
              //     fontSize: 14,
              //     lineHeight: 20,
              //   },
              // },
              // formatter: "{b}",
              fontSize: 14,
              textStyle: {
                // color: "transparent",
                color: "#ffffff",
                // with: 5,
                // padding: [3, 3],
                // margin: [1, 1, 1],
                // backgroundColor: {
                //   image: iconUrl,
                // },
              },
            },
          },
          // {
          //   type: "bar3D", // 使用柱状图类型来模拟地形的高度显示，也可以使用其他类型如 'scatter3D' 等根据需要选择
          //   data: data, // 这里可以填入具体的数据点信息，例如 [[经度, 纬度, 高程值]] 等。
          //   coordinateSystem: "geo3D", // 指定坐标系为 Geo3D
          //   symbol: "circle",
          //   label: {
          //     show: true, // 是否显示标签文本
          //     formatter: "{b}", // 数据项名称的格式化，{b} 表示数据项名称（如果有的话）
          //     position: "right", // 标签的位置，可以是 'top'、'bottom'、'left'、'right' 或者具体的像素值如 [10, -10] 等。
          //   },
          // },
        ],
      };
      myChart.setOption(option);
      // myChart.on("mouseover", { seriesName: "uuu" }, function (params) {
      myChart.on("click", { seriesName: "uuu" }, function (params) {
        // myChart.on("mouseover", function (params) {
        // console.log("悬停了...");
        if (params.componentType === "series") {
          console.log("Clicked on scatter3D point:", params.data); // params.data 是被点击的数据点
          // const geo = myChart.getModel().getComponent("geo3D");
          // const coord = geo.dataToPoint([
          //   params.data.value[0],
          //   params.data.value[1],
          // ]); // 获取坐标点（这里用的是虚拟数据，实际应为经纬度）
          // alert(params.data.value[0], params.data.value[1]);
          // showTooltip(coord, params.name, myChart); // 显示文本框或提示信息
          // params 包含被点击数据项的信息
          // console.log(params);
          // 假设你的数据格式为 [经度, 纬度, 数值]
          // 实际数据格式需根据你的series中data的具体结构调整
          if (params.data && params.data.value) {
            const [lng, lat] = params.data.value;
            // 获取点击位置的像素坐标 (params.event 包含事件信息)
            if (params.event) {
              const pointInPixel = [params.event.offsetX, params.event.offsetY];
              // const geoCoord = myChart.convertToPixel({seriesIndex: params.seriesIndex}, [params.data.value[0], params.data.value[1]]); // 假设数据中有经纬度信息 [经度, 纬度]
              // const popupPosition = {x: geoCoord[0], y: geoCoord[1]};
              // const pointInPixel = [params.data.value[0], params.data.value[1]];
              // console.log("x:" + pointInPixel[0]);
              // console.log("geoCoord" + geoCoord);
              // console.log("y:" + pointInPixel[1]);
              // console.log("geoCoord:1" + geoCoord[1]);
              // 更新弹窗位置和内容
              popup.value = {
                visible: true,
                x: pointInPixel[0] + 10 + "px", // 稍微偏移避免遮挡
                y: pointInPixel[1] + 10 + "px",
                data: {
                  lng: lng,
                  lat: lat,
                  // 可以在这里添加更多从params中提取的需要展示的信息
                  name: params.data.name,
                },
              };
              popupX.value = pointInPixel[0] + 10;
              popupY.value = pointInPixel[1] + 10;
              // console.log(popup.value);
            }
          }
        }
      });
      myChart.getZr().on("click", function (event) {
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。

        if (!event.target) {
          // 点击在了空白处，做些什么。
          popup.value.visible = false;
        }
      });
    };
    const chartsPrject = () => {
      let myChart = echarts.init(document.getElementById("project"));
      // const container = document.getElementById("project");

      // const myChart = new Charts(container);
      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "秀水镇",
            "孙家庄镇",
            "路家村镇",
            "南娄镇",
            "牛村镇",
            "上社镇",
            "仙人乡",
            "北下庄乡",
            "梁家寨乡",
            "西潘乡",
          ],
          axisLabel: {
            color: "#ffffff",
            formatter: function (value) {
              return value.split("").join("\n");
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          nameTextStyle: {
            color: "#ffffff",
          },
          name: "数量",
          type: "value",
          axisLabel: {
            color: "#ffffff",
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "数量",
            data: [120, 200, 150, 80, 70, 110, 130, 120, 150, 210],
            type: "bar",
            itemStyle: {
              // color: "#a2d7ff", // 设置柱状图的颜色
              color: "#0896d7", // 设置柱状图的颜色
              normal: {
                barBorderRadius: 30,
              },
            },
            barWidth: "30%",
          },
          {
            name: "成本",
            type: "line",
            smooth: false,
            data: [102, 102, 130, 140, 145, 135, 120, 110, 165, 130],
            itemStyle: {
              color: "yellow", // 设置柱状图的颜色
            },
          },
        ],
      };

      // const option1 = {
      //   // title: {
      //   //   text: "气温与降雨量走势图",
      //   // },
      //   // legend: {
      //   //   data: ["降雨量", "气温"],
      //   //   bottom: 10,
      //   // },
      //   xAxis: {
      //     data: [
      //       "一月份",
      //       "二月份",
      //       "三月份",
      //       "四月份",
      //       "五月份",
      //       "六月份",
      //       "七月份",
      //       "八月份",
      //       "九月份",
      //       "十月份",
      //     ],
      //     axisLabel: {
      //       style: {
      //         fill: "#ffffff",
      //       },
      //       formatter: function (value) {
      //         return value.value.split("").join("\n");
      //       },
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //   },
      //   yAxis: [
      //     {
      //       // show: false,
      //       nameTextStyle: {
      //         fill: "#ffffff",
      //       },
      //       name: "数量",
      //       data: "value",
      //       min: 0,
      //       max: 300,
      //       interval: 50,
      //       splitLine: {
      //         show: false,
      //         style: {
      //           // lineDash: [3, 3],
      //         },
      //       },
      //       axisLabel: {
      //         style: {
      //           fill: "#ffffff",
      //         },
      //         // formatter: "{value} ml",
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //     },
      //     {
      //       name: "气温",
      //       data: "value",
      //       position: "right",
      //       min: 0,
      //       max: 30,
      //       interval: 5,
      //       splitLine: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         formatter: "{value} °C",
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //     },
      //   ],
      //   series: [
      //     {
      //       name: "降雨量",
      //       data: [175, 125, 90, 130, 45, 65, 65, 47, 50, 52],
      //       type: "bar",
      //       gradient: {
      //         color: ["#37a2da", "#67e0e3"],
      //       },
      //       animationCurve: "easeOutBounce",
      //     },
      //     {
      //       name: "气温",
      //       data: [23, 18, 16, 14, 10, 8, 6, 32, 25, 16],
      //       type: "line",
      //       lineStyle: {
      //         color: "red",
      //         fill: "red",
      //       },
      //       yAxisIndex: 1,
      //       animationCurve: "easeOutBounce",
      //     },
      //   ],
      // };

      //   title: {
      //     text: "气温与降雨量走势图",
      //   },
      //   legend: {
      //     data: ["降雨量", "气温"],
      //     bottom: 10,
      //   },
      //   xAxis: {
      //     data: [
      //       "一月份",
      //       "二月份",
      //       "三月份",
      //       "四月份",
      //       "五月份",
      //       "六月份",
      //       "七月份",
      //       "八月份",
      //       "九月份",
      //       "十月份",
      //     ],
      //     axisLabel: {
      //       style: {
      //         rotate: 20,
      //         textAlign: "left",
      //         textBaseline: "top",
      //       },
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //   },
      //   yAxis: [
      //     {
      //       name: "降雨量",
      //       data: "value",
      //       min: 0,
      //       max: 300,
      //       interval: 50,
      //       splitLine: {
      //         style: {
      //           lineDash: [3, 3],
      //         },
      //       },
      //       axisLabel: {
      //         formatter: "{value} ml",
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //     },
      //     {
      //       name: "气温",
      //       data: "value",
      //       position: "right",
      //       min: 0,
      //       max: 30,
      //       interval: 5,
      //       splitLine: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         formatter: "{value} °C",
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //     },
      //   ],
      //   series: [
      //     {
      //       name: "降雨量",
      //       data: [155, 135, 100, 120, 40, 55, 70, 50, 45, 55],
      //       type: "bar",
      //       gradient: {
      //         color: ["#37a2da", "#67e0e3"],
      //       },
      //       animationCurve: "easeOutBounce",
      //     },
      //     {
      //       name: "气温",
      //       data: [22, 18, 15, 14, 11, 9, 5, 5, 5, 5],
      //       type: "line",
      //       yAxisIndex: 1,
      //       animationCurve: "easeOutBounce",
      //     },
      //   ],
      // };
      myChart.setOption(option);
    };
    const chartsProjectType = () => {
      let myChart = echarts.init(document.getElementById("projectType"));
      let option = {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow",
        //   },
        // },
        legend: {},
        xAxis: {
          type: "value",
          show: false,
          // boundaryGap: [0, 0.01],
          axisLabel: {
            color: "#ffffff",
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [
            "能源领域项目",
            "工业项目",
            "制造业项目",
            "基础设施和民生项目",
            "科技创新项目",
            "文旅项目",
          ],
          axisLabel: {
            color: "#ffffff",
            margin: 40,
            // interval: 20,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            // name: "2011",
            type: "bar",
            data: [482030, 434890, 590340, 304970, 431744, 630230],
            showBackground: true,
            barWidth: "40%",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              normal: {
                // color: "rgba(108, 254, 255, 0.7)",
                barBorderRadius: 30,
                // 渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#388CFF",
                  },
                  {
                    offset: 1,
                    color: "#6CFEFF",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    };
    const chartsprojectProgress = () => {
      let myChart = echarts.init(document.getElementById("projectProgress"));
      let option = {
        legend: {
          orient: "vertical", // 设置图例为垂直布局
          left: "right", // 设置图例在右侧
          top: "center",
          itemHeight: 10,
          innerWidth: 10,
          itemGap: 15,
          textStyle: {
            color: "#ffffff",
          },

          // 使用自定义的渲染器
          formatter: function (params) {
            // 这里返回的图例项将不会直接影响显示顺序，只是用于生成图例项的文本
            // console.log(params);
            return params;
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["60%", "75%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                color: "#ffffff",
                formatter: function (params) {
                  return (
                    "项目完成度\n" +
                    params.data.name +
                    ":" +
                    params.data.value +
                    "%"
                  );
                },
                // fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 60, name: "项目一" },
              { value: 60, name: "项目二" },
              { value: 30, name: "项目三" },
              { value: 40, name: "项目四" },
              { value: 50, name: "项目五" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };

    return {
      items,
      lists,
      popup,
      popupX,
      popupY,
      sumConfig,
      planConfig,
      doneConfig,
      sumPriceConfig,
      planPriceConfig,
      donePriceConfig,
      listConfig,
      changeOne,
      changeTwo,
      changeThree,
      chartMap,
      chartsPrject,
      chartsProjectType,
      chartsprojectProgress,
      cameraCountConfig,
      cameraOnConfig,
      cameraOutConfig,
    };
  },
  mounted() {
    this.chartMap();
    this.chartsPrject();
    this.chartsProjectType();
    this.chartsprojectProgress();
    let sConfig = {
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [865],
      content: "{nt}",
      animationFrame: 100,
    };
    let pConfig = {
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [400],
      content: "{nt}",
    };
    let dConfig = {
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [300],
      content: "{nt}",
    };
    let sPConfig = {
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [1200],
      content: "{nt}亿",
    };
    let pPConfig = {
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [1100],
      content: "{nt}亿",
    };
    let dPConfig = {
      style: {
        fontSize: 25,
        fill: "#ffffff",
      },
      number: [300],
      content: "{nt}亿",
    };
    let cCPConfig = {
      style: {
        fontSize: 20,
        fill: "#ffffff",
      },
      number: [100],
      content: "{nt}",
    };
    let cOnPConfig = {
      style: {
        fontSize: 20,
        fill: "#ffffff",
      },
      number: [60],
      content: "{nt}",
    };
    let cOutPConfig = {
      style: {
        fontSize: 20,
        fill: "#ffffff",
      },
      number: [40],
      content: "{nt}",
    };
    this.sumConfig = sConfig;
    this.planConfig = pConfig;
    this.doneConfig = dConfig;
    this.sumPriceConfig = sPConfig;
    this.planPriceConfig = pPConfig;
    this.donePriceConfig = dPConfig;
    this.cameraCountConfig = cCPConfig;
    this.cameraOnConfig = cOnPConfig;
    this.cameraOutConfig = cOutPConfig;
  },
  onUnmounted() {
    if (this.myChart != null && !this.myChart.isDisposed()) {
      this.myChart.dispose();
    }
  },
  beforeUnmount() {
    // 防止内存泄露
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
};
</script>
<style   scoped>
.title-bg {
  color: white;
  margin-top: 10px;
  background-image: url("../assets/title_bg.png");
}
.all {
  width: 100%;
  height: 100vh;
  /* background-image: url("../assets/all_bg.png"); */
  background-image: url("../assets/image_22.png");
  background-color: #001631;
  /* background: blueviolet; */
  background-size: cover;
  /* background-position: center; */
  /* display: flex; */
  flex-direction: column;
  overflow: hidden;
}
.head {
  width: 100%;
  height: 8vh;
  /* height: 80px; */
  display: flex;
}
.head-one {
  width: 25%;
  height: 100%;
  color: white;
}
.head-two {
  width: 25%;
  height: 100%;
  display: flex;
}
.head-item {
  width: 33%;
  height: 100%;
  color: white;
  font-size: 16px;
}
.head-item:hover {
  cursor: pointer;
}
.font-100 {
  margin-top: 15%;
  width: 100%;
  height: 30px;
}
.line {
  width: 40%;
  height: 2px;
  background: white;
}
.content {
  width: 100%;
  height: 93vh;
  display: flex;
}
.content-left {
  width: 25%;
  height: 100%;
}
.content-center {
  width: 50%;
  height: 100%;
}
.content-center-one {
  width: 100%;
  height: 10vh;
  display: flex;
}
.conten-center-one-item {
  width: 12%;
  height: 9vh;
  margin-left: 4%;
  margin-top: 10px;
  background-image: url("../assets/sum_bg.png");
  background-size: 100% 100%;
  opacity: 0.9;
}
.content-center-two {
  width: 100%;
  height: 58vh;
}
.content-center-three {
  margin-top: 8px;
  width: 100%;
  height: 22vh;
  background: rgba(180, 180, 180, 0.1);
}
.content-right {
  width: 25%;
  height: 100%;
}
.map {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 600px;
  /* background: #001631; */
  /* background: #333333; */
}
.custom-popup {
  position: absolute;
  /* background: #051640; */
  /* border: 1px solid rgb(62, 215, 213); */
  /* border-image: linear-gradient(45deg, #051640, #fff) 1; */
  /* border-image: rgb(62,215,213); */
  /* border-radius: 10px; */
  /* padding: 10px; */
  /* box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.15); */
  z-index: 1000;
  color: #ffffff;
  width: 260px;
  /* opacity: 0.7; */
}

.custom-popup h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 14px;
}

.custom-popup p {
  margin: 4px 0;
  font-size: 12px;
}

.custom-popup button {
  margin-top: 8px;
  padding: 4px 8px;
  background: #f0f0f0;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
}
</style>
